<template>
  <div class="managePage">
    <div class="groupVue">
      <div class="groupTop">
        <span style="font-size: 16px; font-weight: 600">全部客服(290)</span>
        <span class="el-icon-plus add"></span>
      </div>
      <div class="groupList">
        <div
          class="group"
          v-for="(item, index) in classfly"
          :key="index"
          :class="{ active: item.id == classflyId }"
          @click="classflyClick(item)"
        >
          <div style="display: flex; align-items: center">
            <img src="../../../assets/imgs/file.png" style="width: 30px; height: 30px" />
            <span style="padding-left: 10px">{{ item.name }}</span>
          </div>
          <div class="opVue" style="display: flex; align-items: center">
            <span style="color: #389bf6" @click.stop="editClassfly(item)">编辑</span>
            <span style="color: #389bf6; padding-left: 15px">删除</span>
          </div>
        </div>
      </div>
    </div>
    <div class="tableVue">
      <div class="tableTop">
        <span style="padding-right: 10px">状态</span>
        <el-select v-model="value" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div>
      <div class="tableList">
        <div class="thVue">
          <div class="th">员工ID</div>
          <div class="th">客服名称</div>
          <div class="th">账号</div>
          <div class="th">状态</div>
          <div class="th">添加时间</div>
          <div class="th">操作</div>
        </div>
        <div class="tdVue">
          <div class="tdItem" v-for="(item, index) in list" :key="index">
            <div class="td">{{ item.id }}</div>
            <div class="td">{{ item.nickname }}</div>
            <div class="td">{{ item.account }}</div>
            <div class="td" style="color: #64c3fc; font-weight: 600">在线</div>
            <div class="td">{{ item.createTime }}</div>
            <div class="td" style="color: #389bf6; cursor: pointer; font-weight: 600">
              <span style="padding: 0 5px;" @click="dialogTableVisible10 = true; id = item.id;">编辑分组</span>
              <span style="padding: 0 5px;" @click="dialogTableVisible20 = true; id = item.id;">编辑名称</span>
            </div>
              
          </div>
        </div>
        <div class="paginationVue">
          <el-pagination background layout="prev, pager, next" :total="total"></el-pagination>
        </div>
      </div>
    </div>

    <el-dialog title="修改分组名称" :visible.sync="dialogTableVisible" width="500px" top="30vh">
      <div class="dialogVue">
        <div style="display: flex; align-items: center">
          <div class="label">分组名称</div>
          <el-input style="flex: 1; margin-left: 20px" placeholder="分组名称" v-model="name"></el-input>
        </div>
        <div class="btnVue">
          <div class="btn" @click="dialogTableVisible = false">取消</div>
          <div class="btn" @click="updateClass()">确定</div>
        </div>
      </div>
    </el-dialog>

    <el-dialog title="编辑分组" :visible.sync="dialogTableVisible10" width="500px" top="30vh">
      <div class="dialogVue">
        <div style="display: flex; align-items: center">
          <div class="label">分组名称</div>
          <el-select v-model="groupValue" placeholder="请选择" style="flex: 1; margin-left: 20px">
            <el-option v-for="item in classfly" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </div>
        <div class="btnVue">
          <div class="btn" @click="dialogTableVisible10 = false; groupValue=''">取消</div>
          <div class="btn" @click="updateGroupFun()">确定</div>
        </div>
      </div>
    </el-dialog>
    <el-dialog title="编辑名称" :visible.sync="dialogTableVisible20" width="500px" top="30vh">
      <div class="dialogVue">
        <div style="display: flex; align-items: center">
          <div class="label">客服名称</div>
          <el-input v-model="serviceName" placeholder="输入客服名称" style="flex: 1; margin-left: 20px"></el-input>
        </div>
        <div class="btnVue">
          <div class="btn" @click="dialogTableVisible20 = false; serviceName=''">取消</div>
          <div class="btn" @click="updateGroupFun()">确定</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { groupClassfly, groupList, updateClassfly, updateGroup } from '@/api/msg';
export default {
  data() {
    return {
      classflyId: '',
      options: [
        { value: '1', label: '请选择' },
        { value: '2', label: '在线' },
        { value: '3', label: '离线' },
        { value: '4', label: '忙碌' },
      ],
      value: '',
      classfly: [],
      page: 1,
      limit: 20,
      nickname: '',
      total: 0,
      list: [],
      dialogTableVisible: false,
      dialogTableVisible10: false,
      dialogTableVisible20: false,
      name: '',
      id: '',
      groupValue: '',
      serviceName: ""
    };
  },
  created() {
    this.getClassfly();
  },
  methods: {
    getClassfly() {
      groupClassfly().then((res) => {
        console.log(res);
        this.classfly = res;
        this.classflyId = res[0].id;
        console.log('分组', this.classfly);
        this.getList();
      });
    },
    classflyClick(item) {
      this.classflyId = item.id;
      this.getList();
    },
    getList() {
      groupList({
        assistantGroupId: this.classflyId,
        page: this.page,
        limit: this.limit,
        nickname: this.nickname,
      }).then((res) => {
        console.log(res);
        this.list = res.list;
        this.total = res.total;
        console.log('客服列表');
      });
    },
    editClassfly(item) {
      this.name = item.name;
      this.id = item.id;
      this.dialogTableVisible = true;
      console.log(this.name, this.id);
    },
    updateClass() {
      updateClassfly({
        name: this.name,
        id: this.id,
      }).then((res) => {
        this.dialogTableVisible = false;
        this.$message({
          message: '修改成功',
          type: 'success',
        });
        this.name = '';
        this.id = '';
        this.getClassfly();
      });
    },
    updateGroupFun() {
      console.log(this.groupValue, this.id);
      updateGroup({
        assistantGroupId: this.groupValue  || null,
        id: this.id,
        nickname: this.serviceName || null
      }).then((res) => {
        this.dialogTableVisible10 = false;
        this.dialogTableVisible20 = false;
        this.$message({
          message: '修改成功',
          type: 'success',
        });
        this.groupValue = '';
        this.serviceName = ''
        this.id = '';
        this.page = 1;
        this.getList();
        console.log(res);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.managePage {
  width: 100%;
  height: calc(100vh - 186px);
  background: #fff;
  display: flex;
  .groupVue {
    width: 300px;
    height: calc(100vh - 186px);
    border-right: 1px solid #f5f5f5;
    .groupTop {
      width: 300px;
      height: 60px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 15px;
      .add {
        font-size: 20px;
        font-weight: 600;
        cursor: pointer;
      }
    }
    .groupList {
      width: 300px;
      height: calc(100vh - 186px - 60px);
      overflow-y: scroll;
      .group {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
        cursor: pointer;
        .opVue {
          visibility: hidden;
        }
      }
      .group:hover {
        background: #f6f9fe;
        span {
          color: #389bf6;
        }
        .opVue {
          visibility: visible;
          span {
            color: #389bf6;
          }
        }
      }
      .active {
        background: #f6f9fe;
        color: #389bf6;
      }
    }
    .groupList::-webkit-scrollbar {
      width: 0;
    }
  }

  .tableVue {
    flex: 1;
    height: calc(100vh - 186px);
    .tableTop {
      width: 300px;
      height: 60px;
      display: flex;
      align-items: center;
      padding: 0 15px;
    }
    .tableList {
      width: 100%;
      height: calc(100vh - 186px - 150px);
      .thVue {
        width: 100%;
        display: flex;
        height: 70px;
        align-items: center;
        border-bottom: 1px solid #f5f5f5;
        .th {
          flex: 1;
          color: #333333;
          font-weight: 600;
          text-align: center;
        }
      }
      .tdVue {
        width: 100%;
        height: calc(100vh - 186px - 150px - 40px);
        overflow-y: scroll;
        .tdItem {
          width: 100%;
          height: 50px;
          display: flex;
          align-items: center;
          border-bottom: 1px solid #f5f5f5;
          .td {
            flex: 1;
            text-align: center;
          }
        }
      }
      .tdVue::-webkit-scrollbar {
        width: 0;
      }
      .paginationVue {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
.dialogVue {
  padding-bottom: 30px;
  .label {
    color: #999;
  }
  ::v-deep .el-input__inner {
    height: 40px;
  }
}
.btnVue {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
  .btn {
    width: 66px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    margin-left: 15px;
    cursor: pointer;
  }
  .btn:nth-child(1) {
    color: #333;
    border: 1px solid #f5f5f5;
    border-radius: 4px;
  }
  .btn:nth-child(2) {
    color: #fff;
    background: #0256ff;
    border-radius: 4px;
  }
}
</style>